<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org" layout:decorator="admin/fragments/layout">
<head>
    <title>角色新增</title>
    <meta name="active" content="apps-center"/>
    <!-- jQuery Validate Plugin-->
    <script th:src="@{/resources/assets/admin-tools/admin-forms/js/jquery.validate.min.js}"></script>

    <!-- jQuery Validate Addon -->
    <script th:src="@{/resources/assets/admin-tools/admin-forms/js/additional-methods.min.js}"></script>

    <!-- FileUpload JS -->
    <script th:src="@{/resources/vendor/plugins/fileupload/fileupload.js}"></script>

    <!-- Required Plugin CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/resources/vendor/plugins/tagmanager/tagmanager.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/resources/vendor/plugins/daterange/daterangepicker.css}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/resources/vendor/plugins/datepicker/css/bootstrap-datetimepicker.css}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/resources/vendor/plugins/colorpicker/css/bootstrap-colorpicker.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/resources/vendor/plugins/select2/css/core.css}"/>

    <!-- Theme CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/resources/assets/skin/default_skin/css/theme.css}"/>

    <!-- 提示 PNotify -->
    <script th:src="@{/resources/vendor/plugins/pnotify/pnotify.js}"></script>
</head>
<body>

<header id="topbar" class="ph10" layout:fragment="topbar">
    <div class="topbar-left">
        <ol class="breadcrumb">
            <li class="crumb-icon crumb-active">
                <a th:href="@{/admin/dashboard}"> <span class="glyphicon glyphicon-home"></span> </a>
            </li>
            <li class="crumb-trail">角色管理</li>
            <li class="crumb-trail"><a href="" th:href="@{/role/list(pclass=p_6,currentClass=c_9)}">角色列表</a></li>
            <li class="crumb-trail">角色新增</li>
        </ol>
    </div>
</header>

<div layout:fragment="content">
    <div class="theme-primary mw1000 center-block">
        <div class="panel">
            <form method="post" th:action="@{/role/add}" th:object="${role}" id="admin-form">
                <input th:field="*{roleId}" type="hidden"/>
                <div class="panel-body bg-light">
                    <div class="admin-form form-group">
                        <label class="tipLabel"><span class="tipTitle">角色名称:</span></label>
                        <label class="field prepend-icon">
                            <input type="text" th:field="*{roleName}" class="gui-input" placeholder="角色名称..."/>
                            <label class="field-icon">
                                <i class="fa fa-credit-card"></i>
                            </label>
                        </label>
                    </div>

                    <div class="admin-form form-group">
                        <label class="tipLabel"><span class="tipTitle">备注:</span></label>
                        <label class="field prepend-icon">
                            <input type="text" th:field="*{remark}" class="gui-input" placeholder="备注..."/>
                            <label class="field-icon">
                                <i class="fa fa-credit-card"></i>
                            </label>
                        </label>
                    </div>
                </div>
                <!-- end .form-body section -->
                <div class="panel-footer text-right">
                    <button type="submit" class="btn btn-primary btn-sm" id="submitInput"> 保存</button>
                    <button type="button" onclick="javascript:history.go(-1);" class="btn btn-primary btn-sm"> 返回
                    </button>
                </div>
                <!-- end .form-footer section -->
            </form>

        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript" layout:fragment="javascript">
    /*<![CDATA[*/
        jQuery(document).ready(function () {
            $("#admin-form").validate({
                errorClass: "state-error",
                validClass: "state-success",
                errorElement: "em",
                rules: {
                    roleName: {
                        required: true,
                        minlength:1,
                        maxlength:20
                    },
                    remark: {
                        minlength:1,
                        maxlength:200
                    }
                },
                messages: {
                    roleName: {
                        required: '请输入角色名称',
                        minlength: '最少1个字',
                        maxlength: '最长20个字'
                    },
                    remark: {
                        minlength: '最少1个字',
                        maxlength: '最长200个字'
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').addClass(errorClass).removeClass(validClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').removeClass(errorClass).addClass(validClass);
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        element.closest('.option-group').after(error);
                    } else {
                        error.insertAfter(element.parent());
                    }
                }
            });
        });
    /*]]>*/
</script>
</body>
</html>